<template>
    <div class="xinrenroot">
        <Header :title="title"></Header>
        <div class="container">
            <div class="banner">
                <p>新 用 户 专 享</p>
                <h2>特惠专区超值优惠</h2>
        </div>
        <div class="list">
            <ul>
                <li>
                    <xinrengoods></xinrengoods>
             
                </li>
                    <li>
                    <xinrengoods></xinrengoods>
             
                </li>
                    <li>
                    <xinrengoods></xinrengoods>
             
                </li>
                    <li>
                    <xinrengoods></xinrengoods>
             
                </li>
                    <li>
                    <xinrengoods></xinrengoods>
             
                </li>
                    <li>
                    <xinrengoods></xinrengoods>
             
                </li>
                    <li>
                    <xinrengoods></xinrengoods>
             
                </li>
            </ul>
        </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import Header from '@/components/header.vue'
    import xinrengoods from '@/components/xinrengoods.vue'
    export default {
        components:{
            Header,xinrengoods,
        },
        data(){
            return{
                title:"新人特惠"
            }
        }
    }
</script>

<style  lang="stylus" scoped>
.container
    height 93.4%
    overflow-y scroll
.xinrenroot
    height 100%
    .banner
        height 1.6rem
        text-align center
        background: linear-gradient(135deg, rgba(102, 110, 232, 1) 0%, rgba(102, 110, 232, 1) 0%, rgba(153, 153, 255, 1) 98%, rgba(153, 153, 255, 1) 100%)
        color white
        display flex;
        flex-direction column
        justify-content center
        >p
           font-size .16rem
        >h2
            font-size  .28rem
    .list
        ul
            display flex 
            padding .1rem .16rem
            justify-content space-between
            flex 0.8
            flex-wrap wrap
            li
                margin-bottom .14rem

</style>